<template>
  <div class="mainContainer">
    <el-container>
      <div style="position: relative; z-index: 10;">
        <el-aside :width="collapse ? '70px' : '200px'">
          <div class="asideStyle">
            <div class="logo">
              <img src="../../assets/logo.png">
            </div>
            <Menus :menu-list="menuList"></Menus>
          </div>
        </el-aside>
      </div>
      <el-container>
        <el-header class="headerStyle">
          <Header/>
        </el-header>
        <TagList @onClickTag="onClickTag" @onCloseTag="onCloseTag"></TagList>
        <el-main class="elMain">
          <router-view>
            <template #default="{ Component, route }">
              <transition name="router-view" mode="out-in">
                <component :is="Component" :key="route.path"/>
              </transition>
            </template>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
  import {computed, defineComponent, watch, onMounted} from "vue";
  import {useStore} from "vuex";
  import {useRoute, useRouter} from "vue-router";
  import TagList from './components/tagList/TagList.vue'
  import Menus from './components/menus/index.vue'
  import {MenuTag} from "@/types/menu";
  import Header from "@/components/main/components/header/Header.vue";

  export default defineComponent({
    name: 'index',
    components: {
      TagList,
      Menus,
      Header
    },
    setup() {
      const store = useStore()
      const route = useRoute()
      const router = useRouter()
      const menuList = store.getters.menuList
      let collapse = computed(() => {
        return store.state.app.collapse
      })
      const onClickTag = (tag: MenuTag) => {
        router.push({path: tag.path})
      }
      const onCloseTag = (tag: MenuTag) => {
        let menuState = store.state.app.menuState
        if (tag.path === menuState.defaultActive) {
          router.back()
        }
        store.commit('removeTag', tag)
      }
      onMounted(()=>{
        if(window.innerWidth < 1400 && !store.state.app.collapse) store.commit('setCollapse')
        if(window.innerWidth > 1400 && store.state.app.collapse) store.commit('setCollapse')
        window.onresize = function () {
          if(window.innerWidth < 1400 && !store.state.app.collapse) store.commit('setCollapse')
          if(window.innerWidth > 1400 && store.state.app.collapse) store.commit('setCollapse')
        }
      })
      watch([route], (newValue, prevValue) => {
        let route = newValue[0],
          //获取菜单栏展开数组
          defaultOpens = route.matched.filter(item => item.path != route.path).map(item => item.path),
          //是否已存在页面标签
          isTagFlag = store.state.app.tagList.some((item: MenuTag): Boolean => item.path === route.path);
        if (!isTagFlag) {
          let temp = {path: route.path, name: route.name, title: route.meta.title,lang: route.meta.lang}
          store.commit('pushTag', temp)
        }
        let breadCrumbs = route.matched.map(item => {
          return {
            path: item.path,
            name: item.name,
            meta: item.meta,
          }
        });
        store.commit('setBreadCrumbs', breadCrumbs)
        store.commit('setMenuState', {defaultActive: route.path, defaultOpens: defaultOpens})
      })
      return {
        menuList,
        onClickTag,
        onCloseTag,
        collapse
      }
    },
  })
</script>

<style lang="scss" scoped>
  @import "style";
</style>
